<template>
    <el-form ref="form" :model="formData" :rules="rules" :label-width="formLabelWidth">

        <el-form-item label="标识" :error="joinToString(formErrors.id||'')" prop="id">
            <el-row>
                <el-col :span="12" :xs="24">
                    <el-input v-model="formData.id"></el-input>
                </el-col>
                <el-col :span="12" :xs="0"></el-col>
            </el-row>
        </el-form-item>
        <el-form-item label="名称" :error="joinToString(formErrors.name||'')" prop="name">
            <el-row>
                <el-col :span="12" :xs="24">
                    <el-input v-model="formData.name"></el-input>
                </el-col>
                <el-col :span="12" :xs="0"></el-col>
            </el-row>
        </el-form-item>

        <el-form-item label="是否启用" :error="joinToString(formErrors.status||'')" prop="status">

            <el-row>
                <el-col :span="12" :xs="24">
                    <el-radio-group v-model="formData.status">
                        <template v-for="(item, index) in statusOptions">
                            <el-radio v-if="''!=item.value" :label="parseInt(item.value)" :key="index">{{item.label}}
                            </el-radio>
                        </template>
                    </el-radio-group>
                </el-col>
                <el-col :span="12" :xs="0"></el-col>
            </el-row>
        </el-form-item>

        <el-form-item label="">
            <el-button type="primary" @click="submit">保存</el-button>

        </el-form-item>
    </el-form>
</template>

<script>
    export default {
        props: {
            formLabelWidth: {
                type: String,
                default: '120px'
            },
            dataEntity: {
                type: Object,
                default: null
            },
            statusOptions: {
                type: Array,
                default: []
            },

        },

        data() {
            return {
                formData: {},
                formErrors: {},
                rules: {
                    id: [
                        {required: true, message: '标识必填', trigger: 'blur'},
                    ],
                    name: [
                        {required: true, message: '名称必填', trigger: 'blur'},
                    ],

                }

            }
        },
        created() {
            let _this = this;
            this.assignData(this.dataEntity);
        },
        destroyed(){

        },
        mounted() {
            let _this = this

        },
        methods: {
            assignData: function (data) {
                if (LeUtils.typeIs('object', data)) {
                    this.formData = Object.assign({}, this.formData, data)
                    this.formData.origin_id = LeUtils.valueGet(this.formData,'id')
                }

            },
            joinToString: function (obj, glue) {
                return LeUtils.joinToString(obj, glue)
            },
            submit: function (event) {

                if (event) {
                    event.preventDefault()
                }
                let _this = this;

                this.$refs['form'].validate((valid) => {
                    //console.log(valid);
                    if (valid) {
                        //console.log(_this.formData)



                        LeRoute.request('api.l-e-s.access-control.role.save', _this.formData).then(function (res_data) {
                            _this.$message.success('保存成功')
                            _this.assignData(LeUtils.valueGet(res_data, 'data', {}))
                            _this.$nextTick(function () {
                                window.location.reload();
                            });
                        }).catch(function (error) {
                            _this.formErrors = LeUtils.valueGet(error, 'response.data.errors',{});
                        })

                    } else {
                        //console.log('error submit!!');
                        return false;
                    }
                });
            },

        }
    }
</script>
